<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap 进度条</title>
    <meta charset="utf-8">
    <!-- 适应移动设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./jquery-3.5.1.min.js"></script>
    <script src="./js/bootstrap.js"></script>
</head>

<body>
    <br>
    <div class="container" style="border: 1px solid red;padding-top: 5px;">
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                style="width: 40%;">
                <span>40% 完成</span>
                <!-- sr-only：隐藏文本 -->
                <!-- <span class="sr-only">40% 完成</span> -->
            </div>
        </div>
    </div>

    <br>
    <div class="container" style="border: 1px solid red;">
        <div class="progress">
            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0"
                aria-valuemax="100" style="width:40%">
                40% Complete (success)
            </div>
        </div>

        <div class="progress">
            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0"
                aria-valuemax="100" style="width:50%">
                50% Complete (info)
            </div>
        </div>

        <div class="progress">
            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0"
                aria-valuemax="100" style="width:60%">
                60% Complete (warning)
            </div>
        </div>

        <div class="progress">
            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0"
                aria-valuemax="100" style="width:70%">
                70% Complete (danger)
            </div>
        </div>
    </div>

    <br>
    <div class="container" style="border: 1px solid red;">
        <div class="progress progress-striped">
            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0"
                aria-valuemax="100" style="width: 90%;">
                <span>90% 完成（成功）</span>
            </div>
        </div>
        <div class="progress progress-striped active">
            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0"
                aria-valuemax="100" style="width: 40%;">
                <span>40% 完成</span>
            </div>
        </div>
    </div>

    <br>
    <div class="container" style="border: 1px solid red;padding-top: 5px;">
        <div class="progress">
            <div class="progress-bar progress-bar-success" role="progressbar"
                 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                 style="width: 40%;">
                <span >40% 完成</span>
            </div>
            <div class="progress-bar progress-bar-info" role="progressbar"
                 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                 style="width: 30%;">
                <span >30% 完成（信息）</span>
            </div>
            <div class="progress-bar progress-bar-warning" role="progressbar"
                 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                 style="width: 30%;">
                <span >30% 完成（警告）</span>
            </div>
        </div>
    </div>

</body>
<script>
</script>
</html>